<template>
  <div class="tab-container">
    <router-link class="tab-item" tag="div" to="/classic">
      <span class="iconfont">&#xeb9a;</span>
      <span class="tab-link">流行</span>
    </router-link>
    <router-link class="tab-item" tag="div" to="/book">
      <span class="iconfont">&#xeb99;</span>
      <span class="tab-link">书单</span>
    </router-link>
    <router-link class="tab-item" tag="div" to="/music">
      <span class="iconfont">&#xeb97;</span>
      <span class="tab-link">歌单</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'Tab'
}
</script>

<style lang="stylus" scoped>
  .tab-container
    position: fixed
    bottom: 0
    width: 100%
    display: flex
    height: .88rem
    line-height: .38rem
    font-size: .2rem
    box-shadow: -.1rem 0 .05rem #C7C7C7
    background-color: #fff
    z-index: 99
    .tab-item
      flex: 1
      text-align: center
      font-weight: bold
      display: flex
      flex-direction: column
      justify-content: flex-end
      .iconfont
        font-size: .34rem
      span
        color: #C7C7C7
      &.router-link-active
        span
          color: #000
</style>
